;(function(){
    // 获取DOM函数封装
    function $(className){
      return document.getElementsByClassName(className)[0]
    }
  
    // 获取DOM
    var carousel = $('carousel'),
        imgs = $('imgs'),
        imgsLis = imgs.getElementsByTagName('li'),
        prev = $('prev'),
        next = $('next'),
        count = $('count'),
        countLis = count.getElementsByTagName('li')
  
    var imgWidth = imgsLis[0].offsetWidth // 每张图的宽度
    // console.log(imgWidth)
    var timer = null;   // 计时器
    var speed = 20;     // 速度
    var now = 0;        // 初始显示的是第一张图的下标
  
    // 改变分页器的外观且让图轮播起来
    function tab(){
      // 清空所有li标签上的active类名
      for(var i=0,len=countLis.length;i<len;i++){
        countLis[i].className = ''
      }
      // 给当前li添加active类
      countLis[now].className = 'active'
  
      // 轮播组图
      move(imgs, -(now * imgWidth), speed)
    }
  
    // 单击分页器，显示对应的图
    for(var i=0,len=countLis.length;i<len;i++){
      countLis[i].index = i; // 为每一个li标签添加一个index属性，并给它绑定一个下标
      countLis[i].onclick = function(){
        now = this.index // 将分页器的下标与轮播的图关联起来（通过下标关联）
        tab()
      }
    }
  
    // 切换到上一张图（向左翻页）
    prev.onclick = function(){
      now--; 
      if(now == -1){
        now = imgsLis.length - 1
      }
      
      tab()
    }
  
    // 切换到下一张图（向右翻页）
    next.onclick = function(){
      now++ 
      if(now == imgsLis.length){
        now = 0
      }
      
      tab()
    }
    // 自动轮播（实际上是向右翻页）
    var timer1 = setInterval(next.onclick,2000)
  
    // 鼠标悬停时，将停止轮播
    carousel.onmouseover = function(){
      clearInterval(timer1)
    }
    // 鼠标移走时，将继续轮播
    carousel.onmouseleave = function(){
      timer1 = setInterval(next.onclick,2000)
    }
  
    function move(imgs,distance,speed){
      clearInterval(timer)
      timer = setInterval(function(){
        var left = imgs.offsetLeft // imgs的偏移值
        var nowSpeed = (distance - left) / 5 // 控制速度
        imgs.style.left = left + nowSpeed + 'px'
      },speed)
    }
  })();